<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>下拉菜单属性</title>
    <script type="text/javascript" src="../internal.js"></script>
    <script type="text/javascript" src="../../../jquery.js"></script>
    <script type="text/javascript" src="../../../bootstrap/bootstrap.js"></script>
    <script type="text/javascript" src="listmenu.js"></script>
    <link rel="stylesheet" href="../../../bootstrap/bootstrap.css">
    <link rel="stylesheet" href="../../../bootstrap/bootstrap-responsive.css">
    <style type="text/css">
        * {
            color: #838383;
            margin: 0;
            padding: 0
        }

        html, body {
            font-size: 12px;
        }

        body {
            padding-left: 20px;
            padding-right: 20px;
        }
    </style>
</head>
<body>
<table class="table table-striped table-bordered" style="margin-top:18px;margin-bottom: 0;">
    <tr>
        <th><span>控件名称</span><span class="label label-important">*</span></th>
        <th><span>控件样式</span></th>
    </tr>
    <tr>
        <td><input id="listName" placeholder="必填项" type="text" size="20"/></td>
        <td> 高：<input id="listLines" type="text" size="3"/> 行 ， 宽： <input id="listWidth" type="text" size="3"/> 像素</td>
    </tr>
    <tr style="display: none;">
        <th>
            <span>关联子菜单名称</span> <a id="showTips"
                                    data-content="若关联子菜单，需要子下拉菜单设置的时候在每个选项后加上特殊标记以记录与父菜单关系，形如“子菜单项目|父菜单项目”，则父菜单发生变化，子菜单会随之自动刷新筛选"
                                    rel="popover" data-original-title="说明"><i class="icon-info-sign"></i></a></th>
        <td><input id="listChild" type="text" size="20"></td>
    </tr>
    <tr>
        <th><span>初始选定</span></th>
        <td><span id="listSelValue" class="uneditable-input" style="height:20px;"></span></td>
    </tr>
    <tr>
        <th colspan="2">
            <span>列表值</span> <span class="label label-important">*</span>
        </th>
    </tr>
    <tr>
        <td colspan="2">
            <select id="cmbText" style="width:100%;height: 100px;" multiple="multiple"></select>
        </td>
    </tr>
    <tr>
        <td>
            <div class="btn-group">
                <a title="上移" onclick="fnMove(-1);" class="btn btn-large"><i class="icon-arrow-up"></i></a>
                <a title="下移" onclick="fnMove(1);" class="btn btn-large"><i class="icon-arrow-down"></i></a>
                <a title="设为初始化时选定值" onclick="fnSetSelectedValue();" class="btn btn-large"><i
                        class="icon-ok-circle"></i></a>
                <a title="删除" onclick="fnDelete();" class="btn btn-large"><i class="icon-remove"></i></a>
            </div>
        </td>
        <td>
            <input type="text" placeholder="输入列表值..." size="16" id="listText">

            <div class="btn-group" style="float:right;">
                <a title="新增" onclick="fnAdd();" class="btn btn-large btn-primary"><i class="icon-plus"></i></a>
                <a title="修改" onclick="fnModify();" class="btn btn-large"><i class="icon-edit"></i></a>
            </div>
        </td>
    </tr>
</table>
<script type="text/javascript">
    var oNode = null;
    var oListText;
    window.onload = function () {
        oListText = $G('cmbText');
        oListText.style.width = oListText.offsetWidth;
        //弹出窗口初始化函数，这里主要是判断是编辑下拉列表还是新增
        if (UE.plugins['listmenu'].editdom) {
            oNode = UE.plugins['listmenu'].editdom;
            $G('listName').value = oNode.getAttribute('title');
            $G('listSelValue').innerHTML = oNode.value;
            $G('listLines').value = oNode.getAttribute('size');
            if (oNode.getAttribute('child') == null) {
                $G('listChild').value = '';
            } else {
                $G('listChild').value = oNode.getAttribute('child');
            }
            var sWidthFull = oNode.style.width;
            $G('listWidth').value = sWidthFull.substr(0, sWidthFull.length - 2);//这里的substr是为了去掉末尾的'px'
            for (var i = 0; i < oNode.options.length; i++) {
                var sText = oNode.options[i].value;
                fnAddComboOption(oListText, sText, sText);
            }
        }
        $('#showTips').popover();
    }
    dialog.oncancel = function () {
        if (UE.plugins['listmenu'].editdom) {
            delete UE.plugins['listmenu'].editdom;
        }
    };
    dialog.onok = function () {
        if ($G('listName').value == '') {
            alert('控件名称不能为空');
            $('#listName').focus();
            return false;
        }
        if (oListText.options.length == 0) {
            alert('请添加下拉菜单选项！');
            $('#listText').focus();
            return false;
        }
        var sSize = $G('listLines').value;
        if (sSize == null || isNaN(sSize) || sSize <= 1) {
            sSize = '';
        }
        if (!oNode) {
            var sUrl = parent.getItemUrl;
            var nItemId = null;
            ajax.request(sUrl, {
                timeout: 60000, onsuccess: function (xhr) {
                    try {
                        nItemId = xhr.responseText;
                        oNode = document.createElement("select");
                        oNode.setAttribute('title', $G('listName').value);
                        oNode.setAttribute('name', 'data_' + nItemId);
                        oNode.setAttribute('child', $G('listChild').value);
                        oNode.setAttribute('size', sSize);
                        if ($G('listWidth').value != '') {
                            oNode.style.width = $G('listWidth').value + 'px';
                            //oNode.setAttribute('style','width:'+ $G('listWidth').value + 'px;');
                        }
                        // Add all available options.
                        for (var i = 0; i < oListText.options.length; i++) {
                            var sText = oListText.options[i].value;
                            if (sText.length == 0) {
                                sText = sText;
                            }
                            var oOption = fnAddComboOption(oNode, sText, sText);
                            if (sText == $G('listSelValue').innerHTML) {
                                fnSetAttribute(oOption, 'selected', 'selected');
                                oOption.selected = true;
                            }
                        }
                        editor.execCommand('insertHtml', oNode.outerHTML);
                        return true;
                    } catch (e) {
                        alert('插入控件出错，请联系OA管理员解决 ');
                        return false;
                    }
                }, onerror: function () {
                    alert('Request TimeOut');
                }
            });
        } else {
            oNode.setAttribute('title', $G('listName').value);
            oNode.setAttribute('child', $G('listChild').value);
            oNode.setAttribute('size', sSize);
            if ($G('listWidth').value != '') {
                oNode.style.width = $G('listWidth').value + 'px';
            }
            // Remove all options.
            while (oNode.options.length > 0) {
                oNode.remove(0);
            }
            for (var i = 0; i < $G('cmbText').options.length; i++) {
                var sText = $G('cmbText').options[i].value;
                if (sText.length == 0) {
                    sText = sText;
                }
                var oOption = fnAddComboOption(oNode, sText, sText);
                if (sText == $G('listSelValue').innerHTML) {
                    fnSetAttribute(oOption, 'selected', 'selected');
                    oOption.selected = true;
                }
            }
            delete UE.plugins['listmenu'].editdom; //使用后清空这个对象，变回新增模式
        }
    };
</script>
</body>
</html>
